<!-- https://codepen.io/dudleystorey/pen/BaPeZP -->
<template>
  <div class="background-video">
    <video
      :poster="data ? (data.exParms ? (data.exParms.length>0 ? data.exParms[0]:''):'') : ''"
      id="bgvid"
      playsinline
      autoplay
      muted
      loop
    >
      <!-- 
- Video needs to be muted, since Chrome 66+ will not autoplay video with sound.
WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
      <!-- <source
        src="http://thenewcode.com/assets/videos/polina.webm"
        type="video/webm"
      /> -->
      <source
        :src="data ? data.sourceUrl : ''"
        type="video/mp4"
      />

    </video>
    <div id="polina">
      <!-- <h1>Polina</h1> -->
      <h1>{{data ? data.title : '无标题'}}</h1>
      <!-- <p>filmed by Alexander Wagner 2011</p> -->
      <p><a
          :href="data ? data.toUrl : '/'"
          target="_blank"
        >更多</a></p>
      <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p> -->
      <!-- <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p> -->
      <p>{{data ? (IsPC() ? data.description : strCutOff(data.description,10,'…')) : '无描述'}}</p>
      <button>暂停播放</button>
    </div>
  </div>
</template>

<script>
import { IsPC } from '@/assets/js/device.js'
import { strCutOff } from '@/assets/js/string.js'
export default {
  props:{
    data:{
      type:Object,
      default:()=>{}
    },
    mode:{
      type:Number,
      default:1
    }
  },
  data(){
    return{
      IsPC,
      strCutOff
    }
  },
  mounted(){
    var vid = document.getElementById("bgvid");
    var pauseButton = document.querySelector("#polina button");

    if (window.matchMedia('(prefers-reduced-motion)').matches) {
        vid.removeAttribute("autoplay");
        vid.pause();
        pauseButton.innerHTML = "已暂停";
    }

    function vidFade() {
      vid.classList.add("stopfade");
    }

    vid.addEventListener('ended', function()
    {
    // only functional if "loop" is removed 
    vid.pause();
    // to capture IE10
    vidFade();
    }); 

    pauseButton.addEventListener("click", function() {
      vid.classList.toggle("stopfade");
      if (vid.paused) {
        vid.play();
        pauseButton.innerHTML = "暂停";
      } else {
        vid.pause();
        pauseButton.innerHTML = "已暂停";
      }
    })
  }
}
</script>

<style lang="less" scoped>
/* body {
  margin: 0;
  background: #000; 
} */

.background-video {
  // position: absolute;
  min-width: 100%;
  min-height: 100%;
  video {
    // position: fixed;
    position: absolute;
    // top: 50%;
    // left: 50%;
    // min-width: 100%;
    // min-height: 100%;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    /* z-index: -100; */
    /* transform: translateX(-50%) translateY(-50%); */
    // background: url("//demosthenes.info/assets/images/polina.jpg") no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }
  .stopfade {
    opacity: 0.5;
  }

  #polina {
    position: absolute;
    right: 100px;
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight: 100;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 2rem;
    width: 33%;
    margin: 2rem;
    float: right;
    font-size: 1.2rem;
    h1 {
      font-size: 3rem;
      text-transform: uppercase;
      margin-top: 0;
      letter-spacing: 0.3rem;
    }
    button {
      display: block;
      width: 80%;
      padding: 0.4rem;
      border: none;
      margin: 1rem auto;
      font-size: 1.3rem;
      background: rgba(255, 255, 255, 0.23);
      color: #fff;
      border-radius: 3px;
      cursor: pointer;
      transition: 0.3s background;
    }
    button:hover {
      background: rgba(0, 0, 0, 0.5);
    }
    a {
      display: inline-block;
      color: #fff;
      text-decoration: none;
      background: rgba(0, 0, 0, 0.5);
      padding: 0.5rem;
      transition: 0.6s background;
    }
    a:hover {
      background: rgba(0, 0, 0, 0.9);
    }
  }

  @media screen and (max-width: 500px) {
    div {
      width: 70%;
    }
  }
  @media screen and (max-device-width: 800px) {
    html {
      background: url(https://thenewcode.com/assets/images/polina.jpg) #000
        no-repeat center center fixed;
    }
    #bgvid {
      display: none;
    }
  }
}
</style>